<script setup >
// ========================导入区=========================
import { ref, reactive, toRaw, computed } from 'vue';
import { useCommunityList, useAdvStatus, useRoleStatus } from '../../../swy-hook/index2';
import ImageUpload from '../../../components/ZXSimg'
import { addAdvListApi, seeAdvListApi, editAdvListApi } from '../../../api/adv'
import { ElMessage } from "element-plus";
// ========================注册区=========================
const communityList = useCommunityList()
const advStatus = useAdvStatus()
const roleStatus = useRoleStatus()
const emit = defineEmits(["updateList"]);
// =======================================================
const isShow = ref(false)
const formRef = ref()
const formData = reactive({
  community_code: '',
  link: '',
  name: '',
  remark: '',
  status: '',
  type: '',
  pic_url: "",
})
const formRules = {
  community_code: [{ required: true, message: "请选择", trigger: "change" }],
  link: [{ required: true, message: "请选择", trigger: "blur" }],
  name: [{ required: true, message: "请选择", trigger: "blur" }],
  remark: [{ required: true, message: "请选择", trigger: "blur" }],
  pic_url: [{ required: true, message: "请选择", trigger: "blur" }],
  type: [{ required: true, message: "请选择", trigger: "blur" }],
}
// 关闭事件
const closeHandler = () => {
  // 移除校验
  formRef.value.resetFields()
  // 重置表单数据
  Object.assign(formData, {
    community_code: '',
    link: '',
    name: '',
    remark: '',
    status: null,
    type: null,
    pic_url: "",
    id:null
  })
}

// console.log(data);
//  新增事件
const onsubmit = async () => {
  try {
    await formRef.value.validate()
    const data = toRaw(formData)
    console.log(data);
    data.id ? await editAdvListApi(data) : await addAdvListApi(data)
    ElMessage.success('操作成功')
    isShow.value = false
    emit('updateList')
  } catch (error) {
    console.log(error);
  }
}
// 回显事件
const replyData = async (id) => {
  // console.log(id);
  const res = await seeAdvListApi(id)
  // console.log(res);
  Object.assign(formData, res.data)
  isShow.value = true
}
// 标题
const title = computed(() => {
  return formData.id ? '修改广告' : '新增广告'
})
// 暴露出去
defineExpose({
  isShow, replyData
});
</script>

<template>
  <el-drawer v-model="isShow" size="50%" with-header :title="title" @close="closeHandler">
    <el-form :model="formData" :rules="formRules" ref="formRef" label-width="120px" label-position="top" :inline="false">
      <el-row :gutter="20">
        <el-col :span="10">
          <el-form-item label="所属小区" prop="community_code">
            <el-select clearable v-model="formData.community_code">
              <el-option v-for="item in communityList" :key="item.id" :label="item.name" :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="广告名称" prop="name">
            <el-input placeholder="请输入" v-model="formData.name"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="10">
          <el-form-item label="链接内容" prop="link">
            <el-input v-model="formData.link" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="广告位置" prop="type">
            <el-select clearable v-model="formData.type">
              <el-option v-for="(item, index) in advStatus" :key="index" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="10">
          <el-form-item label="备注信息" prop="remark">
            <el-input v-model="formData.remark" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="启用状态" prop="status">
            <el-radio-group v-model="formData.status">
              <el-radio v-for="(item, index) in roleStatus" :key="index" :label="item.value" size="large">{{
                item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="图片内容" prop="pic_url">
            <ImageUpload 
            v-model="formData.pic_url"
            :type="'adv'"
            :limit="1"
            ></ImageUpload>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div style="flex: auto">
        <el-button size="large" @click="isShow = false">取消</el-button>
        <el-button size="large" type="primary" @click="onsubmit">确定</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<style scoped></style>